<template>
  <el-table class="tag-table" :data="data" style="width: 1000px">
    <template v-for="item in column" :key="item.id">
      <el-table-column v-if="!item.operate" :label="item.text" :prop="item.key">
        <template #default="props">
          <span>{{ props.row[item.key] || "NO Data" }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="item.operate" :label="item.text">
        <template #default="props">
          <el-button size="mini" @click="handleBtnClick(props.row, 'change')">{{
            item.operateName[0]
          }}</el-button>
          <el-popconfirm
            :title="`你确定要删除这个${msg}吗`"
            @confirm="handleBtnClick(props.row, 'delete')"
          >
            <template #reference>
              <el-button type="danger" size="mini">{{
                item.operateName[1]
              }}</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  props: {
    data: Array,
    column: Array,
    msg: String,
  },
  setup(props, { emit }) {
    const handleBtnClick = (row, info) => {
      emit("handleBtnClick", { row, info });
    };
    return {
      handleBtnClick,
    };
  },
};
</script>